<template>
	<div class="answer-mine" :style="{ fontSize: fontSize + 'px' }">
		<div class="answer-mine-nav">
			<van-nav-bar @click-left="clickLeft">
				<template #left>
					<img class="left-img" src="../../assets/img/back.png" />
				</template>
				<template #title>
					<div class="pc-b2">答题</div>
				</template>
				<template #right>
					<div class="pc-b1" @click="showPicker = true">设置</div>
					<div class="ipad-b1" @click="showPicker = true">
						<div class="d-flex">
							<img class="settings-img" src="../../assets/img/pc/settings.png" />
						</div>
					</div>
					<div class="pc-b2">
						<div class="ipad-b2" @click="showPicker2 = true">
							<div class="d-flex">
								<img class="settings-img" src="../../assets/img/pc/settings.png" />
							</div>
						</div>
					</div>
				</template>
			</van-nav-bar>
		</div>
		<div class="answer-paper">
			<!-- 移动端 -->

			<div class="answer-box ipad-pc-b2">
				<div class="swiper mySwiper">
					<div class="swiper-wrapper">
						<div class="swiper-slide answer-content" v-for="(v,i) in questionList">
							<div class="he-6"></div>
							<div class="answer-stem">
								<div class="answer-num" v-if="i == 0"><span>{{i+1}}</span>/{{questionList.length}}</div>
								<div class="answer-stem-cont d-flex">
									<div class="round"></div>
									<div class="stem-right f20 col-block">
										{{questionList[questionIndex].name}}
									</div>
								</div>
								<div class="jiexi-box" v-if="isJiexi">
									<img class="" src="../../assets/img/jiexi.png" alt="" />
									<div class="f14 color-h">
										這道題的答案是power，原因是因為這道題的答案是因為這道題的答案是因為.
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- pc端 -->
			<div class="answer-box-pc ipad-pc-b1">
				<div class="answer-content">
					<div class="answer-stem">
						<div class="answer-stem-cont d-flex">
							<div class="round"></div>
							<div class="stem-right f20">
								{{questionList[questionIndex].name}}
							</div>
						</div>
						<div class="jiexi-box">
							<img class="" src="../../assets/img/pc/jiexi-w.png" alt="" />
							<div class="f18">
								這道題的答案是power，原因是因為這道題的答案是因為這道題的答案是因為.
							</div>
						</div>
						<div class="d-flex question-btn-box">
							<div class="d-flex d-row-center">
								<img class="l-img1 mr10" src="../../assets/img/pc/left.png" alt="" />
								<img class="l-img2" src="../../assets/img/pc/question1.png" alt="" />
							</div>
							<div class="d-flex answer-btn-box">
								<div class="h-1200-b1">
									<div class="d-flex btn-box d-col-center d-row-center font-btn answer-btn">
										<van-icon name="minus" @click="fontSize--" size="26" class="mr15" />
										<van-icon name="plus" @click="fontSize++" size="26" />
									</div>
								</div>
								<div class="h-1200-b1">
									<div class="d-flex btn-box d-col-center d-row-center pause-btn answer-btn">
										<img src="../../assets/img/mobile/play.png" />
									</div>
								</div>
							</div>
							<div class="d-flex question-btn-right">
								<img class="l-img2 mr10" src="../../assets/img/pc/question2.png" alt="" />
								<img class="l-img1" src="../../assets/img/pc/right.png" alt="" />
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 正确class::correct  错误class::mistake-->
			<div class="selection-box">
				<div class="selection-btn" v-for="(item, index) in answerList" :title="item.name" :key="index"
					:class="{correct: selectedOptionIndex === index && item.isCorrect, mistake: selectedOptionIndex === index && !item.isCorrect, short:item.name.length <=15}"
					@click="selectionBtn(index)">
					{{item.name}}
				</div>
			</div>
			<div class="h-1200-b2">
				<div class="d-flex answer-btn-box">
					<div class="d-flex btn-box d-col-center d-row-center font-btn answer-btn">
						<van-icon name="minus" @click="fontSize--" size="32" class="mr40" />
						<van-icon name="plus" @click="fontSize++" size="32" />
					</div>
					<div class="d-flex btn-box d-col-center d-row-center pause-btn answer-btn">
						<img src="../../assets/img/mobile/play.png" />
					</div>
				</div>
			</div>
		</div>

		<van-popup v-model:show="showPicker" round position="right">
			<settings></settings>
		</van-popup>
		<van-popup v-model:show="showPicker2" :style="{ height: '80%' }" round position="bottom">
			<settings></settings>
		</van-popup>
	</div>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from "vue";
	import {
		useRouter
	} from "vue-router";
	import Settings from "@/components/Settings.vue";

	onMounted(() => {

		var swiper = new Swiper(".mySwiper", {
			effect: "cards",
			grabCursor: true,
		});

	})

	const router = useRouter();
	const fontSize = ref(16);
	const showPicker = ref(false);
	const showPicker2 = ref(false);
	const tabSelect = ref(0);
	const checked = ref(false);
	const isSelection = ref(0);
	const isJiexi = ref(false);
	// 用于跟踪选中选项的索引
	const selectedOptionIndex = ref(-1);
	// 答题列表
	const questionIndex = ref(0)
	const questionList = ref([{
			id: 0,
			name: "Knowledge is a Knowledge is a  Knowledge is a Knowledge is a ________",
			analysis: "這道題的答案是power，原因是因為這道題的答案是因為這道題的答案是因為."
		},
		{
			id: 1,
			name: "Knowledge is a Knowledge is a  Knowledge is a Knowledge is a ________",
			isCorrect: false

		},
		{
			id: 2,
			name: "Knowledge is a Knowledge is a  Knowledge is a Knowledge is a ________",
			isCorrect: false

		},
		{
			id: 3,
			name: "Knowledge is a Knowledge is a  Knowledge is a Knowledge is a ________",
			isCorrect: true

		}
	]);
	const answerList = ref([{
			id: 0,
			name: "the power the power the power",
			isCorrect: false
		},
		{
			id: 1,
			name: "the power the power the power",
			isCorrect: false

		},
		{
			id: 2,
			name: "the power th",
			isCorrect: false

		},
		{
			id: 3,
			name: "the power the ",
			isCorrect: true

		}
	]);
	const secondTabList = ref([{
			id: 0,
			name: "全部",
		},
		{
			id: 1,
			name: "页面模式",
		},
		{
			id: 2,
			name: "显示模式",
		},
		{
			id: 3,
			name: "发音模式",
		},
		{
			id: 4,
			name: "课堂听写",
		},
	]);
	const selectionBtn = (i) => {
		isJiexi.value = true
		selectedOptionIndex.value = i;
	};
	const clickLeft = () => {
		router.back();
	};
	const onClickTab = (data) => {
		console.log(data.name);
		tabSelect.value = data.name;
	};
</script>

<style lang="scss" scoped>
	.swiper {
		width: 327px;
		height: 353px;
	}

	.swiper-slide {
		border-radius: 18px;
	}

	.swiper-slide{
		background-color: #fff;
	}
	:deep(.swiper-slide-shadow){
		background:rgba(162, 200, 255, .2);
	}
	.settings-box {
		padding: 30px 20px;
		background: #f7f9fc;

		.settings-list {
			.zhezhu-box2 {
				padding: 10px 20px;
				background: #fff;

				.zhezhu-b {
					width: 100%;
				}

				.zhezhu-r {
					margin-left: auto;

					.sl-input {
						width: 50px;
					}
				}
			}

			.bochu-box-t {
				padding: 0 22px;
			}

			.bochu-box {
				padding: 22px 0;
				background: #fff;
			}

			.speed-box {
				background: #fff;
				padding: 10px 20px;

				.speed-r {
					margin-left: auto;
				}

				.sl-input {
					width: 50px;
				}
			}

			.settings-cont {
				padding: 16px;
				background: #fff;
			}

			.settings-cont-b {
				padding: 5px 10px;
				background: #F7F9FC;

				.settings-cont-b-s {
					width: 72px;
					height: 60px;
					text-align: center;
					line-height: 60px;
					border-radius: 4px 4px 4px 4px;
				}
			}

			.tit {
				margin: 18px 0 8px;
			}

			.page-moshi {
				.btn-box {
					width: 108px;
					padding: 10px 0;
					text-align: center;
					margin-right: 5px;
					background: #fff;
					color: #9b9da0;

					&.x-btn-box {
						width: 163px;
					}
				}
			}

			.k-btn-box {
				height: 42px;
				width: 150px;
			}

			.t-btn-box {
				height: 42px;
				width: 90px;
			}
		}
	}

	.answer-mine {
		.answer-paper {
			padding: 24px;

			.answer-box-pc {
				width: 710px;
				height: 458px;
				margin: 0 auto;
				background-size: 100% 100%;
				background-image: url("../../assets/img/pc/preview_bg.png");

				.answer-content {
					width: 100%;
					height: 100%;
					position: relative;

					.answer-stem {
						padding: 56px 52px;
						color: #fff;

						.question-btn-box {
							margin-top: 34px;

							.question-btn-right {
								margin-left: auto;

								@media screen and (min-width: 1200px) {
									margin: 0;
								}
							}

							.l-img1 {
								width: 20px;
								height: 20px;
							}

							.l-img2 {
								width: 72px;
								height: 34px;
							}
						}

						.jiexi-box {
							padding: 20px;
							border-top: 1px solid #fff;

							img {
								width: 68px;
								height: 34px;
							}
						}

						.answer-stem-cont {
							padding-top: 6px;
							padding-left: 26px;
							height: 150px;

							.round {
								position: absolute;
								left: 50px;
								top: 68px;
								width: 12px;
								height: 12px;
								background: #fff;
								border-radius: 50%;
							}

							.stem-right {}
						}

						.answer-num {
							text-align: right;

							span {
								color: #1e7bfe;
							}
						}
					}
				}
			}

			.answer-btn-box {
				width: 327px;
				margin: 0 auto;
				margin-top: 16px;

				.answer-btn {
					width: 155px;
					height: 62px;
					background: #ffffff;
					box-shadow: 0px 2px 15px 0px rgba(171, 171, 171, 0.3);
					border-radius: 25px 25px 25px 25px;

					@media screen and (min-width: 1200px) {
						width: 115px;
						height: 46px;
					}

					&.font-btn {
						margin-right: 16px;
					}
				}

				@media screen and (min-width: 1200px) {
					width: auto;
					margin: 0 auto;
					justify-content: center;
				}
			}

			.selection-box {
				width: 327px;
				margin: 0 auto;
				margin-top: 16px;
				display: flex;
				flex-wrap: wrap;

				@media screen and (min-width: 700px) {
					width: 700px;
				}

				.selection-btn {
					width: 100%;
					height: 45px;
					line-height: 45px;
					text-align: center;
					background: #fff;
					box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.5);
					border-radius: 4px 4px 4px 4px;
					margin-bottom: 10px;

					@media screen and (min-width: 1200px) {
						width: calc(50% - 5px);
						margin-right: 10px;

						&:nth-child(2n) {
							margin-right: 0;
						}
					}

					&.short {
						width: calc(50% - 5px);
						margin-right: 10px;

						&:nth-child(2n) {
							margin-right: 0;
						}
					}

					&.correct {
						background: #1e7bfe;
						color: #fff;
					}

					&.mistake {
						background: #f45252;
						color: #fff;
					}
				}
			}

			.answer-box {
				width: 327px;
				height: 353px;
				margin: 0 auto;
				// background: #ffffff;
				// box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.1);
				// border-radius: 8px 8px 8px 8px;
				position: relative;
				flex-direction: column;
				transition: 0.3s ease;

				.answer-content {
					width: 100%;
					height: 100%;
					position: relative;
					// background: #fff;
					z-index: 10;
					border-radius: 8px 8px 8px 8px;

					.answer-stem {
						padding: 8px 8px 16px 8px;

						.jiexi-box {
							padding: 20px;

							img {
								width: 60px;
								height: 30px;
							}
						}

						.answer-stem-cont {
							padding-top: 6px;
							padding-left: 26px;
							height: 190px;

							.round {
								position: absolute;
								left: 12px;
								top: 42px;
								width: 12px;
								height: 12px;
								border: 2px solid #1e7bfe;
								border-radius: 50%;
							}

							.stem-right {}
						}

						.answer-num {
							text-align: right;

							span {
								color: #1e7bfe;
							}
						}
					}

					.he-6 {
						height: 6px;
						background: #a2c8ff;
						border-radius: 3px 3px 3px 3px;
					}
				}

				.answer-shadow1 {
					width: 100%;
					height: 100%;
					position: absolute;
					top: -6px;
					right: -6px;
					z-index: 9;
					background: #e2ecfc;
					border-radius: 8px 8px 8px 8px;

					&.answer-shadow2 {
						top: -12px;
						right: -12px;
						z-index: 8;
						background: #cedaec;
					}
				}
			}
		}
	}
</style>